<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../fonts/element-icons.ttf">
    <link rel="stylesheet" href="../fonts/element-icons.woff">
    <link rel="stylesheet" href="../css/ele.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/url.js"></script>
    <!-- <script src="../node_modules/element-ui/lib/index.js"></script> -->
    <script src="../js/ele.js"></script>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/Mixin.js"></script>
    <script src="../js/crypto-js.min.js"></script>
    <script src="../js/aes.js"></script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="heart ng-scope" ng-controller="HeartForm">
                <div class="logo" @click="goHome">
                    <img src="../image/index/logo.png" alt="" style="width: 123px;height: 59px;margin-top: 8px;">
                    <div style="width: 1px;
                height: 24px;
                background: #333333;
                margin-top: 7%;
                margin-right: 9px;"></div>
                    <div>留学大数据，智能选校专家</div>
                </div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="menuSelect">
                    <el-submenu index="1">
                        <template slot="title">产品</template>
                        <div class="chanpin">
                            <ul class="unav">
                                <li :class="[activenavliIndex==0?'activenavli':'']" @click="unavclcik(0)">全球院校库</li>
                                <li :class="[activenavliIndex==1?'activenavli':'']" @click="unavclcik(1)">智能选校系统</li>
                            </ul>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==0">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    全球院校库</div>
                                <div class="lcontent">
                                    <!-- <div> -->
                                    <ul v-for="(item,index) in headerList" :key="index">
                                        <li>{{item.name}}</li>
                                        <li v-for="i in item.universityItems" @click="qqyxkClick(item.id,i.id)">
                                            {{i.name}}院校库
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==1">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    智能选校系统</div>
                                <div class="lcontent">
                                    <div>
                                        <ul>
                                            <li v-for="(i,index) in znxxxtList" :key="index" style="font-size: 12px;"
                                                @click="znxxxtSearch(i)">
                                                {{i.name}}</li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-submenu>
                    <el-menu-item index="2">会员</el-menu-item>
                    <el-menu-item index="3">套餐</a></el-menu-item>
                    <el-menu-item index="4">合作</a></el-menu-item>

                </el-menu>
                <div class="user_box" id="user_box">
                    <div v-if="isLogin">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <img :src="HeadImageUrl" alt=""
                                    style="width: 33px;height: 33px; vertical-align: middle;margin-right: 8px;">
                                {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user" @click.native="goUser">个人中心</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-layout"
                                    @click.native="layoutLogin">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else @click="login"><img src="../image/index/user.png" alt=""
                            style="width: 22px;vertical-align: middle;"> <a href="./login.html">登录</a>/ <a
                            href="./register.html">注册</a> </div>
                </div>
            </div>
        </header>
        <div class="logincontent">
            <div class="content">
                <!-- <img src="../image/login/ewm.png" alt="" class="ewm"> -->
                <img src="../image/login/logo.png" alt="" class="logo">
                <div class="title">留学大数据，智能选校专家</div>
                <div class="welcome" style="text-align: center;">
                    欢迎注册<span style="color: #0094FF;">非攻云数</span>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <!-- <el-form-item label="" prop="name">
                        <el-input v-model="ruleForm.name" prefix-icon="el-icon-user" clearable
                            placeholder="请输入账号"></el-input>
                    </el-form-item> -->
                    <el-form-item label="" prop="phone" style="position: relative;">
                        <el-input v-model="ruleForm.phone" prefix-icon="el-icon-phone" clearable
                            placeholder="请输入手机号"></el-input>
                        <el-button :disabled="codeText!='发送'" size="mini" type="primary"
                            style="position: absolute;right: 5px; top: 5px;" @click="getCode">{{codeText}}</el-button>
                    </el-form-item>
                    <el-form-item label="" prop="captcha">
                        <el-input v-model="ruleForm.captcha" prefix-icon="el-icon-yzm" placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="passw">
                        <el-input v-model="ruleForm.passw" show-password prefix-icon="el-icon-password"
                            placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="confirmPassw">
                        <el-input v-model="ruleForm.confirmPassw" show-password prefix-icon="el-icon-password"
                            placeholder="请确认密码"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="register" style="width: 100%;">立即注册</el-button>
                    </el-form-item>
                    <div style="text-align: center;font-size: 12px;">
                        已有账号？<span style="color: #0094FF;cursor: pointer;" @click="gologin">前往登录</span>
                    </div>
                </el-form>
            </div>
        </div>
        <!-- footer -->
        <footer>2023-2024 非攻留学大数据 版权所有 feigongdata.com 浙ICP备2024101258号-1</footer>
    </div>

</body>
<script>
    var app = new Vue({
        mixins: [myMixin],
        el: "#app",
        data() {
            // 验证手机号的正则表达式
            const checkPhone = (rule, value, callback) => {
                const reg = /^1[3-9]\d{9}$/;
                if (value === '') {
                    callback(new Error('手机号不能为空'));
                } else if (!reg.test(value)) {
                    callback(new Error('请输入正确的手机号'));
                } else {
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                console.log(111, value);
                if (!value) {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.passw) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                codeText: "发送",
                activenavliIndex: '0',
                titleList: ['会员', '套餐', '合作'],
                ruleForm: { phone: '', passw: '', confirmPassw: '', captcha: '' },
                rules: {
                    // name: [
                    //     { required: true, message: '请输入账号', trigger: 'blur' },
                    // ],
                    passw: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    confirmPassw: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { validator: checkPhone, trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            getCode() {
                const reg = /^1[3-9]\d{9}$/;
                if (reg.test(this.ruleForm.phone)) {
                    http('captcha/send?phone=' + this.ruleForm.phone, 'get').then(res => {
                        console.log(res);
                        if (res.status == 0) {
                            this.$message.success('发送成功')
                            this.codeText = 60
                            this.timer = setInterval(() => {
                                this.codeText--
                                if (this.codeText <= 0) {
                                    clearInterval(this.timer)
                                    this.codeText = '发送'
                                }
                            }, 1000)
                        }
                    })
                } else {
                    this.$message.error('请输入正确的手机号')
                }
            },
            register() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        http('account/register', 'post', this.ruleForm).then(res => {
                            console.log(res);
                            if (res.status == 0) {
                                this.$message.success('注册成功')
                                location.href = './login.html'
                            } else {
                                return this.$message.error('注册失败')
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            goHome() {
                window.location.href = './index.html'
            },
            gologin() {
                window.location.href = './login.html'
            }
        }
    })
</script>

</html>